<script setup lang="ts">
import { useSetting } from "../../store/manager/setting";
import { useAuth } from "../../store/auth";
import { logout } from "~/utils/api";
import { MessagePlugin } from "tdesign-vue-next";
const settingStore = useSetting();
const authStore = useAuth();
const router = useRouter();

// 切换左侧导航栏央视
const changeLeftNavigationIsCollapsed = () => {
    settingStore.setting.leftNavigationIsCollapsed ? settingStore.setLeftNavigationIsCollapsed(false) : settingStore.setLeftNavigationIsCollapsed(true);
}

// 点击退出登录链接
const handleLogout = () => {
    logout().then((res: any) => {
        // 后端退出处理成功,删除本地数据
        localStorage.clear();
        if (res.success) {
            MessagePlugin.success({
                content: res.message
            });
        } else {
            MessagePlugin.error({
                content: '注销登录失败'
            });
        }
        return;
    }).catch((err) => {
        console.log(err);
    })

    // 无论成功与否，都跳转到登录页面
    router.replace('/user/login');
}
</script>
<template>
    <div>
        <t-head-menu theme="light">
            <template #logo>
                <img height="28" class="h-[28px]" src="https://tdesign.gtimg.com/site/baseLogo-light.png" alt="logo" />
                <span>
                    <t-button theme="default" shape="square" variant="text" @click="changeLeftNavigationIsCollapsed">
                        <t-icon class="collapsed-icon" name="view-list" />
                    </t-button>
                </span>
            </template>
            <template #operations>
                <div class="operations-container">
                    <t-tooltip placement="bottom" content="帮助文档">
                        <t-button theme="default" shape="square" variant="text">
                            <t-icon name="help-circle" />
                        </t-button>
                    </t-tooltip>
                    <t-dropdown :min-column-width="120" trigger="click">
                        <template #dropdown>
                            <t-dropdown-menu>
                                <t-dropdown-item class="operations-dropdown-container-item"
                                    @click="handleNav('/user/index')">
                                    <t-icon name="user-circle" size="16" /> 个人资料
                                </t-dropdown-item>
                                <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
                                    <t-icon name="poweroff" size="16" /> 退出登录
                                </t-dropdown-item>
                            </t-dropdown-menu>
                        </template>
                        <t-button class="header-user-btn" theme="default" variant="text">
                            <template #icon>
                                <t-icon class="header-user-avatar" name="user-circle" />
                            </template>
                            <div class="header-user-account">{{ authStore.auth.userInfo.username }}</div>
                            <template #suffix><t-icon name="chevron-down" size="16" /></template>
                        </t-button>
                    </t-dropdown>
                </div>
            </template>
        </t-head-menu>
    </div>
</template>
<style></style>